<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from "vue";
import socket from "@/util/WebSocket"

const token = ref(null)
const time = ref(2)
const count = ref(0)
const list = ref([])
let timer = null
const boolean = ref(true)
const byts = ref(0)

const start = () => {
    boolean.value = false
    socket.init(token.value,(connection) => {
        const elementById = document.getElementById("div");
        connection.onmessage = (message) => {
            count.value++
            // elementById.innerText = message.data
            byts.value = new Blob([message.data]).size / 1024
        };
    })
    timer = setInterval(() => {
        list.value.push(count.value)
        count.value = 0
    },time.value * 1000)
}

const stop = () => {
    boolean.value = true
    clearInterval(timer)
    socket.close()
}

const clear = () => {
    list.value = []
}

</script>

<template>
    token: <input v-model="token" >
    统计时间(s): <input v-model="time" >
    数据大小(kb): <input v-model="byts" disabled >
    <button @click="start" v-show="boolean">开始</button> <button @click="stop">停止</button> <button @click="clear">清空统计</button>
    <div style="width: 100%;height: 50px;background-color: antiquewhite" id="div"></div>
    <div style="width: 100%;height: 200px;overflow-y: auto;background-color: #747bff" id="div" >
        <div v-for="(item,index) in list" :key="index">
            {{index}}，{{time}} 秒，执行： {{item}} 次，平均每秒 {{item / time}} 次
        </div>
    </div>
</template>

<style scoped>

</style>